<template>
  <div>
    <div v-for="(item, index) in list" :key="index">
      <div>
        <el-checkbox
          :label="row.name"
          v-model="row.checked"
          v-for="row in item.checkboxArr"
          @change="handleCheckboxChange"
        ></el-checkbox>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          checkboxArr: [
            { name: "A", checked: true },
            { name: "B", checked: true },
            { name: "C", checked: false },
          ],
        },
        {
          checkboxArr: [
            { name: "AA", checked: true },
            { name: "BB", checked: true },
            { name: "CC", checked: false },
          ],
        },
        {
          checkboxArr: [
            { name: "AAA", checked: true },
            { name: "BBB", checked: true },
            { name: "CCC", checked: true },
          ],
        },
      ],
    };
  },
  mounted() {},
  methods: {
    handleCheckboxChange(e) {
      let models = JSON.parse(JSON.stringify(this.list));
      models.forEach((item) => {
        item.checkboxArr = item.checkboxArr.filter((t) => t.checked);
      });
      let mLen = this.list.length;
      let index = 0;
      let digui = function (arr1, arr2) {
        let res = [];
        arr1.forEach((m) => {
          arr2.forEach((n) => {
            res.push((m.name ?? m) + "," + n.name);
          });
        });
        index++;
        if (index <= mLen - 1) {
          return digui(res, models[index].checkboxArr);
        } else {
          return res;
        }
      };
      let resultArr = [];
      if (mLen >= 2) {
        resultArr = digui(
          models[index].checkboxArr,
          models[++index].checkboxArr
        );
      } else {
        resultArr = models[0];
      }
      let list1 = [];
      resultArr.forEach((k) => {
        k.split(",").forEach((j) => {
          let obj = { name: j, checked: true };
          list1.push(obj);
        });
      });
      console.log(list1);
    },
  },
};
</script>

<style>
</style>
